<template>
  <div class="right-container">
    <!-- 方法1:使用全局计算属性里面的方法 -->
    <!-- <h3>Right 组件 是否全选：{{ $store.getters.isAll }}</h3> -->
    <h3>Right 组件{{ isAll }}</h3>
    <hr />

    <!-- <p>count 值：{{ $store.state.count }}</p> -->
    <p>count 值：{{ count }}</p>
    <!-- <button @click="$store.commit('sub', { num: -1 })" class="btn btn-warning"> -->
    <button @click="sub({ num: -1 })" class="btn btn-warning">-1</button>
    <!-- 方法1:处理异步操作是state里的数据 -->
    <!-- <button @click="$store.dispatch('subBtn')" class="btn btn-danger">-1</button> -->
    <button @click="subBtn" class="btn btn-danger">-1</button>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "Right",
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["isAll"])
  },
  methods: {
    ...mapMutations(["sub"]),
    ...mapActions(["subBtn"]),
  },
};
</script>

<style>
</style>
